<template>
  <view class="compass">
    <uv-navbar
      title=" "
      titleWidth="auto"
      @leftClick="customNavbarBack"
      leftIconColor="#fff"
      bgColor="transparent"
    ></uv-navbar>

    <view class="compass-face">
      <view class="compass-title">
        <view class="uv-m-b-20">{{ getCompassTitle }}</view>
        <uv-icon name="arrow-up-fill" color="#fff"></uv-icon>
      </view>
      <!-- 表盘的旋转和元素遍历的方向是相反的, 减少渲染节点,   -->
      <view class="compass-cont" :style="{ transform: `rotate(${360 - compassDirection}deg)` }">
        <view
          class="compass-cont-item"
          v-for="tick in 12"
          :key="tick"
          :style="[{ transform: `rotate(${tick * 30}deg)` }]"
        >
          <view class="compass-cont-text">
            {{ tick === 360 ? 0 : tick * 30 }}
          </view>
          <view class="compass-cont-line"></view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import commonFuncMixin from "@/utils/commonFuncMixin.js"
export default {
  mixins: [commonFuncMixin],
  data() {
    return {
      compassDirection: 360 // 初始方向为0、360度
    }
  },
  onReady() {
    this.startCompass()
  },
  methods: {
    async startCompass() {
      uni.startCompass()
      uni.onCompassChange(res => {
        this.compassDirection = parseInt(res.direction)
      })
    },

    calculateDirection(angle) {
      if (angle < 0 || angle > 360) {
        throw new Error("角度值必须在0到360之间")
      }
      // 将角度调整到[0, 360)的范围内，以便于区间判断
      angle = angle % 360
      if ((angle >= 0 && angle < 22.5) || angle >= 337.5) {
        return "北"
      } else if (angle >= 22.5 && angle < 67.5) {
        return "东北"
      } else if (angle >= 67.5 && angle < 112.5) {
        return "东"
      } else if (angle >= 112.5 && angle < 157.5) {
        return "东南"
      } else if (angle >= 157.5 && angle < 202.5) {
        return "南"
      } else if (angle >= 202.5 && angle < 247.5) {
        return "西南"
      } else if (angle >= 247.5 && angle < 292.5) {
        return "西"
      } else {
        return "西北"
      }
    }
  },
  computed: {
    getCompassTitle() {
      return `${this.calculateDirection(this.compassDirection)} ${
        this.compassDirection === 360 ? 0 : this.compassDirection
      }°`
    }
  },
  watch: {
    compassDirection: {
      handler: function (val) {
        if (val % 30 === 0) {
          if (typeof uni.vibrateShort === "function") {
            uni.vibrateShort()
          }
        }
      }
    }
  },
  onUnload() {
    uni.stopCompass()
  }
}
</script>
<style lang="scss" scoped>
.compass {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #151515;
  color: #fff;
  overflow: hidden;
  &-title {
    font-size: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    &::after {
      position: absolute;
      content: "";
      display: block;
      left: 0;
      right: 0;
      bottom: -20px;
      height: 20px;
      width: 2px;
      background-color: #fff;
      margin: 0 auto;
      z-index: 9;
    }
  }

  &-cont {
    width: 600rpx;
    height: 600rpx;
    position: relative;
    flex-direction: row;
    margin-top: 10px;
    border: 1px dashed #fff;
    border-radius: 50%;

    &-item {
      width: 100%;
      height: 100%;
      position: absolute;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: flex-start;
      pointer-events: none;
    }
    &-line {
      width: 1px;
      height: 15px;
      background-color: #fff;
    }
    &-text {
      position: absolute;
      top: 20px;
      color: #909399;
    }
  }
}
</style>
